<template>
	<view style="height: 100%">
		<!-- pages/proDetail/proDetail.wxml -->
		<page>
			<view @tap="goBack" class="topback">
				<image src="/static/file/images/left.png"></image>
			</view>

			<block v-if="!reload">
				<view class="detailBanner">
					<swiper style="background: #fff" :indicator-dots="proImages.indicatorDots" :autoplay="autoplay"
						:interval="proImages.interval" :duration="proImages.duration" :circular="true">
						<block v-for="(item, idx) in Attr" :key="idx">
							<swiper-item>
								<video v-if="hasvideo & (idx == 0)" :src="item"></video>
								<image mode="aspectFit" @tap="imgPre" :data-list="Attr" :data-src="item" :src="item"
									class="slide-image" />
							</swiper-item>
						</block>
					</swiper>
				</view>
				<!-- 商品主要信息 -->
				<view class="proInfo">
					<!-- //3：普通商品  4:限时抢购 5:系统团购 6:用户开团 -->
					<view v-if="Ftype == 3" class="v-center between p_pro">
						<view class="p_price">
							￥
							<text style="font-size: 23px">{{ prodetail.Flowprice }}-{{ prodetail.Fhighprice }}</text>
						</view>
						<view class="p_salenum">已售{{ prodetail.Fsalenum }}件</view>
					</view>
					<view v-else class="between stretch group">
						<view class="price_group">
							<view class="v-center">
								<view class="disPrice">￥{{ prodetail.Fsaleprice }}</view>
								<view v-if="Ftype == 4" class="tag">立抢省￥{{ tagprice }}</view>
							</view>
							<view class="v-center">
								<text class="orPrice">￥{{ prodetail.Foprice }}</text>
								<text class="line">|</text>
								<text class="buynum">已售{{ prodetail.Fsalenum }}件</text>
							</view>
						</view>
						<view v-if="prodetail.status == 2" class="count_down algin">已结束</view>
						<view v-if="prodetail.status == 0" class="count_down algin">
							<view class="text">开始时间</view>
							<view class="time">{{ prodetail.Fbtime }}</view>
						</view>
						<view v-else class="count_down">
							<view class="text">
								<text v-if="Ftype == 6">{{ prodetail.Fpersonnum }}人团</text>
								{{ '距结束' }}
							</view>
							<view class="nowrap v-center between" v-if="null != prodetail.obj">
								<view class="time algin">{{ prodetail.obj.day == '00' ? '' : prodetail.obj.day }}</view>
								天
								<view class="time algin">{{ prodetail.obj.hou }}</view>
								:
								<view class="time algin">{{ prodetail.obj.min }}</view>
								:
								<view class="time algin">{{ prodetail.obj.sec }}</view>
							</view>
						</view>
					</view>
					<view class="share_bar v-center between">
						<view class="left-area">
							<view class="proName">
								<view class="summary">
									<text class="brand" v-if="prodetail.Fbrand != ''">{{ prodetail.Fbrand }}</text>
									{{ prodetail.Fsummary }}
								</view>
								<view v-if="Ftype == 5" class="activity_group">
									<view class="progress_sku">
										<view class="progress" :style="'width:' + Fprogress + '%'"></view>
									</view>
									<view class="max">{{ Fprogress }}% ({{ prodetail.Ftotal }}人团)</view>
								</view>
							</view>
						</view>
						<button class="right-area" open-type="share">
							<view :style="'color:' + color" class="icon iconfont icon-fenxiang"></view>
							<view :style="'font-size:12px;color:' + color">分享</view>
						</button>
					</view>
				</view>
				<!-- 商品sku -->
				<view v-if="Ftype != 3" data-type="1" class="sku arrows_list v-center">
					<view class="left_text v-center">
						<view class="pic">
							<image mode="aspectFill " :src="prodetail.Fimg"></image>
						</view>
						<view class="text">
							<view class="attr">{{ Fattr }}</view>
						</view>
					</view>
				</view>
				<!-- 商品评价 -->
				<view class="comment">
					<view class="header v-center between">
						<text class="left_text">宝贝评价</text>
						<navigator v-if="comment.length > 5" hover-class="none" class="more v-center"
							:url="'/pages/comment/comment?spuid=' + Fspuid + '&skuid=' + Fskuid">
							查看更多
							<image style="width: 32px; height: 32px" src="/static/file/images/new_right.png"></image>
						</navigator>
					</view>
					<view v-if="comment.length > 0" class="comment_list">
						<view class="comment_item" v-for="(item, idx) in comment" :key="idx">
							<view class="title v-center between">
								<view class="user v-center">
									<view class="user_pic">
										<image :src="item.Fheadimgurl"></image>
									</view>
									<view class="user_name">{{ unescape(item.Fnickname) }}</view>
								</view>
								<view class="grade v-center">
									<image class="star" src="/static/file/images/star.png"
										v-for="(item, idx) in item.Fstar" :key="idx"></image>
									{{ item.Fstar }}
								</view>
							</view>

							<view class="context">{{ item.Fmessage }}</view>

							<view class="date end">{{ item.Fdate }}</view>
						</view>
					</view>
					<view v-else>
						<view class="algin">
							<image style="width: 160rpx; height: 160rpx" class="noImg"
								src="/static/file/images/nodata.png"></image>
						</view>
						<view class="no_msg algin">暂无评论</view>
					</view>
				</view>

				<!-- 商品详情 -->
				<view class="proDetail">
					<view class="header v-center">
						<text class="left_text">宝贝详情</text>
					</view>
					<view class="detail">
						<rich-text :nodes="Fhdetail"></rich-text>
					</view>
				</view>

				<!-- 底部立即购买/加入购物车 -->
				<view v-if="prodetail">
					<view v-if="(Ftype == 5) | (Ftype == 6)" class="bottomBar">
						<view v-if="(prodetail.status == 0) | (prodetail.status == 2)" style="background: #aaa">
							{{ prodetail.status == 0 ? '活动未开始' : '活动已结束' }}
						</view>
						<view v-else-if="prodetail.Ftotal <= prodetail.Fsalenum" class="salefinish algin">已售罄</view>
						<!-- 团购 -->
						<view v-else-if="Ftype == 5" @tap="showPop" data-type="1" :style="'background:' + color + ';'"
							class="buyNow algin">立即参团</view>
						<!-- 拼团 -->
						<view v-else-if="Ftype == 6" @tap="showPop" data-type="1" :style="'background:' + color + ';'"
							class="buyNow algin">立即开团</view>
					</view>
					<view v-else class="bottomBar stretch between">
						<view @tap="goCart" class="cart">
							<image class="icon" src="/static/file/images/add_cart.png"></image>
							<view class="cart_text">购物车</view>
							<view v-if="Fcount > 0" class="cartNum">{{ Fcount }}</view>
						</view>
						<block v-if="Ftype == 3">
							<view v-if="prodetail.Fisstock == '0'" class="algin" style="background: #aaa; width: 80vw">
								商品已下架</view>
							<view v-else class="algin">
								<view @tap="showPop" data-type="0" class="add_cart">加入购物车</view>
								<view @tap="showPop" data-type="1" class="buy_btn algin">立即购买</view>
							</view>
						</block>
						<block v-else-if="Ftype == 4">
							<view class="algin" v-if="(prodetail.status == 0) | (prodetail.status == 2)"
								style="background: #aaa; width: 100%">
								{{ prodetail.status == 0 ? '活动未开始' : '活动已结束' }}
							</view>
							<view style="background: #aaa; width: 100%"
								v-else-if="prodetail.Ftotal <= prodetail.Fsalenum" class="salefinish algin">已售罄</view>
							<view v-else class="algin">
								<view @tap="showPop" data-type="0" class="add_cart">加入购物车</view>
								<view @tap="showPop" data-type="1" class="buy_btn algin">立即购买</view>
							</view>
						</block>
						<block v-else>
							<view @tap="showPop" data-type="0" class="add_cart">加入购物车</view>
							<view @tap="showPop" data-type="1" class="buy_btn algin">立即购买</view>
						</block>
					</view>
				</view>
				<view v-else class="algin bottomBar" style="background: #aaa; width: 100%">该商品已下架</view>
				<!-- 普通商品选择器组件 -->
			</block>
			<block v-else>
				<view @tap="onShow">
					<view class="algin blank">
						<image class="noImg" mode="widthFix" src="/static/file/images/nolist.png"></image>
					</view>
					<view class="no_msg">获取数据失败，点击重新获取</view>
				</view>
			</block>
			<floatIcon></floatIcon>
			<sqladialog id="sqladialog" @config="doconfigactivity($event, { tagId: 'sqladialog' })"></sqladialog>
			<sqlskudialog id="sqlskudialog" @config="doconfigsku($event, { tagId: 'sqlskudialog' })"></sqlskudialog>
		</page>
	</view>
</template>

<script>
	import sqladialog from '@/component/sqlactivitydialog/sqladialog';
	import sqlskudialog from '@/component/sqlsku/sqlsku';
	import floatIcon from '@/component/floatIcon/floatIcon';
	// pages/proDetail/proDetail.js
	var util = require('../../utils/util.js');
	var api = require('../../utils/prom.js');
	const app = getApp();
	export default {
		components: {
			sqladialog,
			sqlskudialog,
			floatIcon
		},
		data() {
			return {
				Ftype: '',

				//3：普通商品  4:限时抢购 5:系统团购 6:用户开团
				Ftypeid: '',

				//非3时带上
				proImages: {
					//轮播图设置
					indicatorDots: true,
					interval: 3000,
					duration: 1000
				},

				tagprice: 0,
				autoplay: false,
				color: app.globalData.color,

				//全局颜色
				hasvideo: false,

				//是否有视频
				comment: [],

				//评论
				Attr: [],

				//商品图
				prodetail: {
					Flowprice: '',
					Fhighprice: '',
					Fsalenum: '',
					Fsaleprice: '',
					Foprice: '',
					status: 0,
					Fbtime: '',
					Fpersonnum: '',

					obj: {
						day: '',
						hou: '',
						min: '',
						sec: ''
					},

					Fbrand: '',
					Ftotal: '',
					Fimg: '',
					Fisstock: ''
				},

				//默认商品信息
				Fattr: '',

				timer: null,
				skus: [],

				//所有的sku
				selectSkus: [],

				//选择的sku
				selectNum: 1,

				//选择数量
				selStatus: false,

				//选择状态
				selectRes: {},

				//最终选择结果
				submitType: '',

				// 0 加入购物车  1  立即购买
				isSelOver: false,

				repertory: '',

				//库存
				minNum: null,

				reload: false,
				Fcount: 0,

				//购物车数量
				Fprogress: 0,

				//团购进度
				Fhdetail: '',

				Fisshare: false,
				Fspuid: '',
				Fskuid: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			var that = this;

			that.Ftype = options.Ftype;
			that.Ftypeid = options.Ftypeid;

			if (options.Fpid) {
				uni.setStorageSync('Fpid', options.Fpid);
				that.Fisshare = true;
			}

		},
		onReady: function() {
			this.sqladialog = this.zpSelectComponent('#sqladialog');
			this.sqlskudialog = this.zpSelectComponent('#sqlskudialog');
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.onShowClone3389();
		},
		onHide() {
			var that = this;
			clearTimeout(that.timer);
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.onShowClone3389({});
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			var that = this;
			var url = '/pages/proDetail/proDetail?Ftypeid=' + that.Ftypeid + '&Ftype=' + that.Ftype + '&Fpid=' + uni
				.getStorageSync('uid');
			return {
				imageUrl: that.prodetail.FHimg,
				title: that.prodetail.Fsummary,
				desc: '',
				// 分享路径，用户uid+角色
				path: url
			};
		},
		methods: {
			/**
			 * 生命周期函数--监听页面显示
			 */
			onShowClone3389: function() {
				var that = this;
				var type = that.Ftype;
				var Ftypeid = that.Ftypeid;
				if (that.Fisshare == true) {
					app.globalData.dologin(function(res) {
						uni.setStorageSync('token', res.data.Message);
						uni.setStorageSync('uid', res.data.User.Fid);
						uni.setStorageSync('user', res.data.User);
						uni.setStorageSync('store', res.data.Fstore);
						app.globalData.qrUrl = res.data.Fstore.Fsharepic;
						app.globalData.shareinfo.img = res.data.Fstore.Fsharepic;
						that.doShow(type, Ftypeid);
					});
				} else {
					that.doShow(type, Ftypeid);
				}
			},

			doShow: function(type, Ftypeid) {
				var that = this;
				var picattr = [];
				//3：普通商品  4:限时抢购 5:系统团购 6:用户开团

				if (type == 3) {
					var param = {
						token: uni.getStorageSync('token'),
						Fpid: Ftypeid
					};
					api.request('SpSpu', 'get', param, function(res) {
						if (!util.isEmpty(res.data.Product.Fvideo)) {
							that.hasvideo = true;
							picattr.push(res.data.Product.Fvideo);
						}
						res.data.Attrlist.map(function(item) {
							item = util.changeBigpic(item);
							picattr.push(item);
						});
						console.log(picattr);

						that.prodetail = res.data.Product;
						that.comment = res.data.CommentList;
						that.Attr = picattr;

						if (!util.isEmpty(res.data.Product.Fdetailhtml)) {
							that.Fhdetail = unescape(res.data.Product.Fdetailhtml);
						}
					});
				} else if (type == 4) {
					var param = {
						token: uni.getStorageSync('token'),
						Faid: Ftypeid
					};
					api.request('SpActivityTime', 'get', param, function(res) {
						if (!util.isEmpty(res.data.Item.Fvideo)) {
							that.hasvideo = true;
							picattr.push(res.data.Item.Fvideo);
						}
						res.data.Attrlist.map(function(item) {
							item = util.changeBigpic(item);
							picattr.push(item);
						});

						that.prodetail = res.data.Item;
						that.comment = res.data.CommentList;
						that.Attr = picattr;
						that.tagprice = Number(res.data.Item.Foprice - res.data.Item.Fsaleprice).toFixed(
							2);

						if (!util.isEmpty(res.data.Item.Fdetailhtml)) {
							that.Fhdetail = unescape(res.data.Item.Fdetailhtml);
						}
						var arr = JSON.parse(res.data.Item.Fattr);
						var Fattr = '';
						for (var i in arr) {
							var row = arr[i];
							Fattr += row.Fattr + '【' + row.Fvalue + '】';
						}
						that.countDownGroups();
						console.log(Fattr);
						that.Fattr = Fattr;
					});
				} else if (type == 5) {
					var param = {
						token: uni.getStorageSync('token'),
						Faid: Ftypeid
					};
					api.request('SpActivityGroup', 'get', param, function(res) {
						if (!util.isEmpty(res.data.Item.Fvideo)) {
							that.hasvideo = true;
							picattr.push(res.data.Item.Fvideo);
						}
						res.data.Attrlist.map(function(item) {
							item = util.changeBigpic(item);
							picattr.push(item);
						});
						if (!util.isEmpty(res.data.Item.Fdetailhtml)) {
							that.Fhdetail = unescape(res.data.Item.Fdetailhtml);
						}
						var Fprogress = 0;
						if (!util.isEmpty(res.data.Item.Fsalenum)) {
							Fprogress = Number((res.data.Item.Fsalenum / res.data.Item.Ftotal) * 100);
						}
						that.countDownGroups();

						that.prodetail = res.data.Item;
						that.comment = res.data.CommentList;
						that.Attr = picattr;
						that.Fprogress = Fprogress;

						var arr = JSON.parse(res.data.Item.Fattr);
						var Fattr = '';
						for (var i in arr) {
							var row = arr[i];
							Fattr += row.Fattr + '【' + row.Fvalue + '】';
						}
						that.Fattr = Fattr;
					});
				} else if (type == 6) {
					var param = {
						token: uni.getStorageSync('token'),
						Faid: Ftypeid
					};
					api.request('SpActivityGroupUser', 'get', param, function(res) {
						if (!util.isEmpty(res.data.Item.Fvideo)) {
							that.hasvideo = true;
							picattr.push(res.data.Item.Fvideo);
						}
						res.data.Attrlist.map(function(item) {
							item = util.changeBigpic(item);
							picattr.push(item);
						});
						if (!util.isEmpty(res.data.Item.Fdetailhtml)) {
							that.Fhdetail = unescape(res.data.Item.Fdetailhtml);
						}
						that.countDownGroups();

						that.prodetail = res.data.Item;
						that.comment = res.data.CommentList;
						that.Attr = picattr;

						var arr = JSON.parse(res.data.Item.Fattr);
						var Fattr = '';
						for (var i in arr) {
							var row = arr[i];
							Fattr += row.Fattr + '【' + row.Fvalue + '】';
						}
						that.Fattr = Fattr;
					});
				}
				that.cartNum();
			},

			countDownGroups: function() {
				var that = this;
				var row = that.prodetail;
				if (row.Ftsatus == 0) {
					var time = row.Fbtime.replace('T', ' ');
					var index = time.indexOf('.');
					if (index > 0) {
						row.Fbtime = time.substr(0, index);
					} else {
						row.Fbtime = time;
					}
				} else if (row.Ftsatus == 1) {
					var time = row.Fetime.replace('T', ' ');
					var index = time.indexOf('.');
					if (index > 0) {
						row.Fetime = time.substr(0, index);
					} else {
						row.Fetime = time;
					}
					row = util.countDown(row);
				}
				that.prodetail =  row;
				var timerTem = setTimeout(function() {
					that.countDownGroups();
				}, 1000);
				that.timer =  timerTem;
			},

			//查询购物车数量
			cartNum: function() {
				var that = this;
				var param = {
					token: uni.getStorageSync('token')
				};
				api.request('SpScnum', 'get', param, function(res) {
					that.Fcount= res.data.Message;
				});
			},

			toggle: function() { 
				this.hasvideo  =  !this.hasvideo;
			},

			//图片点击预览
			imgPre: function(event) {
				var src = event.currentTarget.dataset.src; //获取data-src
				var imgList = event.currentTarget.dataset.list; //获取data-list
				//图片预览
				uni.previewImage({
					current: src,
					// 当前显示图片的http链接
					urls: imgList // 需要预览的图片http链接列表
				});
			},

			/*返回上一页 */
			goBack: function() {
				var that = this;
				uni.navigateBack({
					delta: 1 // 1返回上一个界面，2返回上上个页面
				});
			},

			//进入购物车
			goCart: function() {
				app.globalData.isTocart = true;
				uni.switchTab({
					url: '/pages/cart/cart'
				});
			},

			//数量确认弹窗
			showPop: function(e) {
				var that = this;
				var Fopt = e.currentTarget.dataset.type;
				if (that.Ftype == 3) {
					that.sqlskudialog.show(that.prodetail, Fopt);
				} else {
					that.sqladialog.show(that.prodetail, that.Ftype, that.Fattr, Fopt);
				}
			},

			//活动确认购买
			doconfigactivity: function(e, _dataset) {
				/* ---处理dataset begin--- */
				this.handleDataset(e, _dataset);
				/* ---处理dataset end--- */
				var that = this;
				var item = e.detail;

				//假如购物车
				if (item.Fopt == 0) {
					this.sqladialog.hidePopup();
					var param = {
						Fpid: that.prodetail.Fid,
						Ftid: that.prodetail.Ftid,
						Fnum: item.Fnum,
						Fprice: that.prodetail.Fsaleprice,
						Faid: that.prodetail.Fid,
						Fastatus: 0
					};
					if (util.isEmpty(userinfo.Fmobile)) {
						uni.navigateTo({
							url: '/pages/userLogin/userLogin'
						});
						return;
					}
					var url = 'SpShopCart?token=' + uni.getStorageSync('token') + '&action=add';
					api.request(url, 'post', param, function(res) {
						that.cartNum();
					});
				} else {
					var source = 1;
					//限时抢购
					if (that.Ftype == 4) {
						var pro = that.prodetail;
						pro.Faid = pro.Fid;
						pro.Fspuid = pro.Fpid;
						pro.Fskuid = pro.Ftid;
						uni.navigateTo({
							url: '/pages/orderSubmit/orderSubmit?source=' + source + '&Fnum=' + item.Fnum +
								'&Fsku=' + encodeURIComponent(JSON.stringify(pro))
						});
					}
					//团购
					else if (that.Ftype == 5) {
						source = 5;
						uni.navigateTo({
							url: '/pages/orderSubmit/orderSubmit?source=' + source + '&Fnum=' + item.Fnum +
								'&Fsku=' + encodeURIComponent(JSON.stringify(that.prodetail))
						});
					}
					//拼团开团
					if (that.Ftype == 6) {
						source = 4;
						uni.navigateTo({
							url: '/pages/orderSubmit/orderSubmit?source=' + source + '&Fnum=' + item.Fnum +
								'&Fsku=' + encodeURIComponent(JSON.stringify(that.prodetail))
						});
					}
				}
			},

			//普通商品购买
			doconfigsku: function(e, _dataset) {
				/* ---处理dataset begin--- */
				this.handleDataset(e, _dataset);
				/* ---处理dataset end--- */
				// var param = {
				//   "sku": sku,
				//   "Fnum": Fnum,
				//   "Fopt": that.data.Fopt
				// }
				var that = this;
				var item = e.detail;
				//添加购物车
				if (item.Fopt == 0) {
					this.sqlskudialog.hidePopup();
					var param = {
						Fpid: item.sku.Fspuid,
						Ftid: item.sku.Fskuid,
						Fnum: item.Fnum,
						Fprice: item.sku.Fsaleprice,
						Faid: 0,
						Fastatus: 0
					};
					var userinfo = uni.getStorageSync('user');
					if (util.isEmpty(userinfo.Fmobile)) {
						uni.navigateTo({
							url: '/pages/userLogin/userLogin'
						});
						return;
					}
					var url = 'SpShopCart?token=' + uni.getStorageSync('token') + '&action=add';
					api.request(url, 'post', param, function(res) {
						that.cartNum();
					});
				} else {
					var userinfo = uni.getStorageSync('user');
					if (util.isEmpty(userinfo.Fmobile)) {
						uni.navigateTo({
							url: '/pages/userLogin/userLogin'
						});
						return;
					}

					//直接购物
					uni.navigateTo({
						url: '/pages/orderSubmit/orderSubmit?source=1&Fnum=' + item.Fnum + '&Fsku=' +
							encodeURIComponent(JSON.stringify(item.sku))
					});
				}
			},

			onShow() {
				console.log('占位：函数 onShow 未声明');
			}
		}
	};
</script>
<style>
	@import './proDetail.css';
</style>